<template>
    <h1>订单管理</h1>
    <el-table :data="pageInfo.list"
                stripe
                style="width:100%"
                border
                :header-cell-style="{textAlign:'center'}">
        <el-table-column prop="userUsername"
                        label="用户名"
                        width="100px"></el-table-column>
        <el-table-column prop="orderCode"
                        label="订单编号"></el-table-column>
        <el-table-column prop="createTime"
                        label="订单创建时间"
                        ></el-table-column>
        <el-table-column prop="totalAmount"
                        label="订单付款金额"
                        width="150px"></el-table-column>
        <el-table-column prop="status"
                        label="订单状态"
                        width="100px">
            <template #default="scope">
                <el-tag class="ml-2"
                        v-if="scope.row.status == 0"
                        effect="dark"
                        type="">待付款</el-tag>
                <el-tag class="ml-2"
                        v-if="scope.row.status == 1"
                        effect="dark"
                        type="">待发货</el-tag>
                <el-tag class="ml-2"
                        v-if="scope.row.status == 2"
                        effect="dark"
                        type="warning">已发货</el-tag>
                <el-tag class="ml-2"
                        v-if="scope.row.status == 3"
                        effect="dark"
                        type="success">已完成</el-tag>
                <el-tag class="ml-2"
                        v-if="scope.row.status == 4"
                        effect="dark"
                        type="danger">已关闭</el-tag>
                <el-tag class="ml-2"
                        v-if="scope.row.status == 5"
                        color="#73767a" style="color:azure">无效订单</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="confirmStatus"
                        label="收货状态"
                        width="100px">
            <template #default="scope">
                <el-tag class="ml-2"
                        v-if="scope.row.confirmStatus == 0"
                        effect="dark" type="danger">未确认</el-tag>
                <el-tag class="ml-2"
                        v-if="scope.row.confirmStatus == 1"
                        effect="dark" type="">已确认</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="deleteStatus"
                        label="删除状态"
                        width="100px">
            <template #default="scope">
                <el-tag class="ml-2"
                        v-if="scope.row.deleteStatus == 0"
                        effect="dark">未删除</el-tag>
                <el-tag class="ml-2"
                        v-if="scope.row.deleteStatus == 1"
                        effect="dark" type="danger">已删除</el-tag>
            </template>
        </el-table-column>       
        <el-table-column prop="receiverName"
                        label="收货人"
                        width="80px"></el-table-column>                           
        <el-table-column prop="detailAddress"
                        label="收货人地址"
                        width="270px"
                        :show-overflow-tooltip="true"></el-table-column>                              
        <el-table-column label="操作"
                        width="350px"
                        align="right">
        <template #default="scope">
            <el-button size="small"
                    type="success"
                    v-if="scope.row.status == 0"
                    @click="changeStatus(scope)">确认付款</el-button>
            <el-button size="small"
                    color="#c77eb5"
                    style="color: #fff"
                    v-if="scope.row.status == 1"
                    @click="changeStatus(scope)">确认发货</el-button>
            <el-button size="small"
                    color="#1b315e"
                    style="color: #fff"
                    v-if="scope.row.confirmStatus == 0 && scope.row.status == 2"
                    @click="changeConfirm(scope)">确认收货</el-button>
            <el-button size="small"
                    type="warning"
                    @click="toOrderItem(scope)">查看子订单</el-button>
            <el-button size="small"
                    type="primary"
                    @click="detail(scope)">详细信息</el-button>
            <el-button size="small"
                    type="danger"
                    v-if="scope.row.deleteStatus == 0"
                    @click="changeDelete(scope)">删除</el-button>
            <el-button size="small"
                    type="danger"
                    v-if="scope.row.deleteStatus == 1"
                    @click="changeDelete(scope)">撤销</el-button>
        </template>
        </el-table-column>
    </el-table>

    <el-pagination class="el-pagination"
                    layout="prev,pager,next,total,jumper,sizes"
                    :total="pageInfo.total"
                    v-model:current-page="pageNum"
                    v-model:page-size="pageSize"
                    :page-sizes="[3,5,10,20]"
                    background
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange">
    </el-pagination>

    <el-drawer v-model="drawer" title="I am the title" :with-header="false" size="32%">
        <span><h4>订单详细信息</h4></span>
        <el-divider content-position="center">订单信息</el-divider>
        <span>
            <el-descriptions
                class="margin-top"
                :column="3"
                :size="small"
                :style="blockMargin"
                border
            >
                <el-descriptions-item label="用户名">{{orderInfo.userUsername}}</el-descriptions-item>
                <el-descriptions-item label="订单编号">{{orderInfo.orderCode}}</el-descriptions-item>
                <el-descriptions-item label="支付类型">{{orderInfo.payType}}</el-descriptions-item>
                <el-descriptions-item label="创建时间" span="2">{{orderInfo.createTime}}</el-descriptions-item>
                <el-descriptions-item label="订单状态">{{orderInfo.status}}</el-descriptions-item>
                <el-descriptions-item label="订单总计">{{orderInfo.totalAmount}}</el-descriptions-item>
                <el-descriptions-item label="支付金额">{{orderInfo.payAmount}}</el-descriptions-item>
                <el-descriptions-item label="运费金额">{{orderInfo.freightAmount}}</el-descriptions-item>
                <el-descriptions-item label="收货人">{{orderInfo.receiverName}}</el-descriptions-item>
                <el-descriptions-item label="收货人联系方式" span="2">{{orderInfo.receiverPhone}}</el-descriptions-item>
                <el-descriptions-item label="收货人地址" span="3">{{orderInfo.detailAddress}}</el-descriptions-item>
            </el-descriptions>
        </span>
        <span v-for="orderItem in orderItems" :key="orderItem.id">
            <el-divider content-position="center">子订单</el-divider>
            <el-descriptions
                class="margin-top"
                :column="3"
                :size="small"
                :style="blockMargin"
                border
            >
                <el-descriptions-item label="订单编号">{{orderItem.orderCode}}</el-descriptions-item>
                <el-descriptions-item label="商品名称" span="2">{{orderItem.spuBrand}} {{orderItem.spuName}} {{orderItem.skuName}}</el-descriptions-item>
                <el-descriptions-item label="商品单价">{{orderItem.skuPrice}}</el-descriptions-item>
                <el-descriptions-item label="购买数量">{{orderItem.skuQuantity}}</el-descriptions-item>
                <el-descriptions-item label="支付金额">{{orderItem.realAmount}}</el-descriptions-item>
                <el-descriptions-item label="商品属性" span="3">{{orderItem.skuAttrsVals}}</el-descriptions-item>
            </el-descriptions>
        </span>
    </el-drawer>
</template>

<script>
import {ref, getCurrentInstance} from 'vue'
export default {
    setup(){
        const {proxy} = getCurrentInstance();
        const pageNum = ref(1);//定义一个变量  number  {}对象 []list
        const pageSize = ref(10);
        const drawer = ref(false);
        const pageInfo = ref(
            {
                total:0,
                pageNum:1,
                pageSize:5,
                size:0,
                startRow:0,
                endRow:0,
                pages:0,
                prePage:0,
                nextPage:0,
                isFirstPage:true,
                isLastPage:true,
                hasPreviousPage:false,
                hasNextPage:false,
                navigatePages:8,
                navigatepageNums:[],
                navigateFirstPage:0,
                navigateLastPage:0,
                list:[]
            }
        );//用ref定义的所有容器都必须使用.value得到它的值
        const orderInfo = ref({});
        const orderItems = ref([]);

        const getData = () => {
            proxy.$http.get(proxy.$url.OmsOrderControllerBaseUrl + '/getPaged',{params:{pageNum:pageNum.value,pageSize:pageSize.value}}).then((res) => {
                if(res.data.code == 2000){
                    pageInfo.value = res.data.data
                    pageNum.value = pageInfo.value.pageNum
                    pageSize.value = pageInfo.value.pageSize
                    for(let item of pageInfo.value.list){
                        item.detailAddress = item.receiverProvince + item.receiverCity + item.receiverRegion + item.receiverDetailAddress
                    }
                }
            })
        };

        const toOrderItem = (scope) => {
            let passOrderInfo = {...scope.row}
            proxy.$router.push({path:'/main/order/orderitem',query:{orderId:passOrderInfo.id}})
        };

        const changeStatus = (scope) => {
            let passOrderInfo = {...scope.row}
            proxy.$http.get(proxy.$url.OmsOrderControllerBaseUrl + '/changeStatus',{params:{orderId:passOrderInfo.id}}).then(res => {
                if(res.data.code == 2000){
                    proxy.$message({
                        type: 'success',
                        message: res.data.message
                    });
                    getData()
                }
            })
        };

        const changeConfirm = (scope) => {
            let passOrderInfo = {...scope.row}
            proxy.$http.get(proxy.$url.OmsOrderControllerBaseUrl + '/changeConfirm',{params:{orderId:passOrderInfo.id}}).then(res => {
                if(res.data.code == 2000){
                    proxy.$message({
                        type: 'success',
                        message: '收货成功!'
                    });
                    getData()
                }
            })
        };

        const changeDelete = (scope) => {
            let passOrderInfo = {...scope.row}
            proxy.$http.get(proxy.$url.OmsOrderControllerBaseUrl + '/changeDelete',{params:{orderId:passOrderInfo.id}}).then(res => {
                if(res.data.code == 2000){
                    proxy.$message({
                        type: 'success',
                        message: res.data.message
                    });
                    getData()
                }
            })
        };

        const detail = (scope) => {
            let passOrderInfo = {...scope.row};
            let passOrderItems = {};
            orderItems.value = [];
            orderInfo.value = passOrderInfo;
            proxy.$http.get(proxy.$url.OmsOrderItemControllerBaseUrl + '/selectAll',{params:{orderId:passOrderInfo.id}}).then(res => {
                if(res.data.code == 2000){
                    passOrderItems = res.data.data;
                    for(let item of passOrderItems){
                        orderItems.value.push(item)
                    }
                }
            })
            drawer.value = true;
        };

        const handleCurrentChange = () => {
            getData()
        };
        const handleSizeChange = () => {
            getData()
        };

        getData()
        return {
            pageInfo,
            orderInfo,
            pageNum,
            pageSize,
            drawer,
            orderItems,

            getData,
            handleCurrentChange,
            handleSizeChange,
            toOrderItem,
            changeStatus,
            changeConfirm,
            changeDelete,
            detail,
        }
    }
}
</script>

<style scope>

</style>